<template>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">
      <router-link to="/">主页</router-link>
    </van-tabbar-item>
    <!-- <van-tabbar-item icon="search">
        搜索
    </van-tabbar-item> -->
    <van-tabbar-item icon="friends-o">
      <router-link to="/personal">个人中心</router-link>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
import { defineComponent, ref, watch } from "vue";
import { useRoute } from "vue-router";

export default defineComponent({
  setup() {
    const route = useRoute();
    let activeRef = ref(0);

    watch(route, ()=>{
      activeRef.value = route.meta.index;
    });

    return { active: activeRef };
  },
});
</script>

<style lang="less" scoped>
a {
  color: #333;
}
.active-route {
  color: var(--van-primary-color);
}
</style>
